﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../plugins/layui/lay/layui.js"></script>
    <script src="../src/js/rayui.js" use="template,code"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 20px 20px 200px;
        }

        #con1, #con2, #con5 {
            min-width: 300px;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>
    <br /><br />


    <h3 class="spliter-middle"><label>=数值转义</label></h3>
    <table class="raytable full-width">
        <tbody>
            <tr>
                <td id="con1"></td>
                <td>
                    <pre class="rayui-code" data-options='{"title":"模板"}'>
    &lt;script id="tmpl1" type="template">
        <span>{{=d.name}}</span>
    &lt;/script>
</pre>
                </td>
            </tr>
        </tbody>
    </table>

    <script id="tmpl1" type="template">
        <span>{{=d.name}}</span>
    </script>

    <!-- 分割线 -->
    <h3 class="spliter-middle"><label>=#数值不转义(可能存在XSS攻击)</label></h3>
    <table class="raytable full-width">
        <tbody>
            <tr>
                <td id="con2"></td>
                <td>
                    <pre class="rayui-code" data-options='{"title":"模板"}'>
    &lt;script id="tmpl2" type="template">
        <span>{{=#d.name}}</span>
    &lt;/script>
</pre>
                </td>
            </tr>
        </tbody>
    </table>

    <script id="tmpl2" type="template">
        <span>{{=#d.name}}</span>
    </script>


    <!-- 分割线 -->
    <h3 class="spliter-middle"><label>each语法</label></h3>
    <table class="raytable full-width">
        <tbody>
            <tr>
                <td>
                    <table class="raytable full-width">
                        <thead>
                            <tr>
                                <th>行号</th>
                                <th>name</th>
                                <th>state</th>
                            </tr>
                        </thead>
                        <tbody id="con3"></tbody>
                    </table>
                </td>
                <td>
                    <pre class="rayui-code" data-options='{"title":"模板"}'>
    &lt;script id="tmpl3" type="template">
    <rs style="color: #e60d0d;font-weight: bold">{{ each d { }}</rs>
        &lt;tr>
            &lt;td>{{=index+1}}&lt;/td>
            &lt;td>{{=value.name}}&lt;/td>
            {{if(value.state)}}
            &lt;td style="color:#0b880b">state=true&lt;/td>
            {{ else }}
            &lt;td style="color:#f00">state=false&lt;/td>
        &lt;/tr>
    {{ } }}
    &lt;/script>
            </pre>
            </td>
            </tr>
        </tbody>
    </table>

    <script id="tmpl3" type="template">
        {{ each d { }}
        <tr>
            <td>{{=index+1}}</td>
            <td>{{=value.name}}</td>
            {{if(value.state)}}
            <td style="color:#0b880b">state=true</td>
            {{ else }}
            <td style="color:#f00">state=false</td>
        </tr>
        {{ } }}
    </script>



    <!-- 分割线 -->
    <h3 class="spliter-middle"><label>each as语法</label></h3>
    <table class="raytable full-width">
        <tbody>
            <tr>
                <td>
                    <table class="raytable full-width">
                        <thead>
                            <tr>
                                <th>行号</th>
                                <th>name</th>
                                <th>state</th>
                            </tr>
                        </thead>
                        <tbody id="con4"></tbody>
                    </table>
                </td>
                <td>
                    <pre class="rayui-code" data-options='{"title":"模板"}'>
    &lt;script id="tmpl4" type="template">
    <rs style="color: #e60d0d;font-weight: bold">{{ each d as v i { }}</rs>
    &lt;tr>
    &lt;td>{{=i+1}}&lt;/td>
    &lt;td>{{=v.name}}&lt;/td>
    {{if(v.state)}}
    &lt;td style="color:#0b880b">state=true&lt;/td>
    {{ else }}
    &lt;td style="color:#f00">state=false&lt;/td>
    &lt;/tr>
    {{ } }}
    &lt;/script>
</pre>
            </td>
            </tr>
        </tbody>
    </table>

    <script id="tmpl4" type="template">
        {{ each d as v i { }}
        <tr>
            <td>{{=i+1}}</td>
            <td>{{=v.name}}</td>
            {{if(v.state)}}
            <td style="color:#0b880b">state=true</td>
            {{ else }}
            <td style="color:#f00">state=false</td>
        </tr>
        {{ } }}
    </script>
    
<!-- 分割线 -->
<h3 class="spliter-middle"><label>修改分割符</label></h3>
<table class="raytable full-width">
    <tbody>
    <tr>
        <td id="con5"></td>
        <td>
            <pre class="rayui-code" data-options='{"title":"模板"}'>
    &lt;script id="tmpl5" type="template">
        <span><%=d.name%></span>
    &lt;/script>
</pre>
        </td>
    </tr>
    </tbody>
</table>

<script id="tmpl5" type="template">
        <span><%=d.name%></span>
    </script>


    <h3 class="spliter-middle"><label>模板语法</label></h3>
    <table class="raytable full-width">
        <thead>
            <tr>
                <th>语法</th>
                <th>说明</th>
                <th>示例</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{= d.field }}</td>
                <td>输出field字段，进行转义</td>
                <td>
<pre class="rayui-code">
&lt;div>{{= d.name }}&lt;/div>
</pre>
                </td>
            </tr>
            <tr>
                <td>{{=# d.field }}</td>
                <td>输出field字段，不进行转义</td>
                <td>
<pre class="rayui-code">
&lt;div>{{=# d.name }}&lt;/div>
</pre>
                </td>
            </tr>
            <tr>
                <td>{{ }}</td>
                <td>js语句，可以使用js内所有语句，注意花括号的配对</td>
                <td>
                    <pre class="rayui-code">
{{ 
  var makeReg = function (str) {
            return new RegExp(str, 'g');
        }
}}
{{ each list as v i }}
&lt;tr>&lt;td>行号{{i+1}}&lt;td>&lt;td>{{v.name}}&lt;td>&lt;/tr>
</pre>
                </td>
            </tr>
            <tr>
                <td>{{ each xxx as xxx xxx}}</td>
                <td>
                    each语法，eg：<br />each list 或者each list as v i<br /><br />
                    当时用as时:<br />
                    v：为当前数值，默认value<br />
                    i：为索引（从0开始），默认index
                </td>
                <td>
                    <pre class="rayui-code">

{{ each list }}
&lt;tr>&lt;td>行号{{index+1}}&lt;td>&lt;td>{{value.name}}&lt;td>&lt;/tr>


{{ each list as v i }}
&lt;tr>&lt;td>行号{{i+1}}&lt;td>&lt;td>{{v.name}}&lt;td>&lt;/tr>
</pre>
                </td>
            </tr>
        </tbody>
    </table>

    <br />
    <br />
    <br />
    <br />
    <br />
    <h3 id="anchor">使用说明</h3>

    <h3 class="spliter-middle"><label>方法调用</label></h3>
<pre class="rayui-code">
入口方法：
    template.render(content, data)
        content：可以模板字符串，也可以是模板id，也可以是option参数
        data：数据

使用：
    rayui.use("template", function () {
        var tmpl = rayui.template;
        var html = tmpl.render("#tmpl1", data);
    });
</pre>
    <h3 class="spliter-middle"><label>options参数</label></h3>
    <table class="raytable full-width">
        <thead>
            <tr>
                <th>参数</th>
                <th>类型</th>
                <th>说明</th>
                <th>默认值</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    open
                </td>
                <td>string</td>
                <td>模板开始分隔符（全局参数）</td>
                <td>
                    &#123;&#123;
                </td>
            </tr>
            <tr>
                <td>
                    close
                </td>
                <td>string</td>
                <td>模板结束分隔符（全局参数）</td>
                <td>
                    &#125;&#125;
                </td>
            </tr>
            <tr>
                <td>
                    content
                </td>
                <td>string</td>
                <td>模板字符串或则模板id</td>
                <td></td>
            </tr>
            <tr>
                <td>
                    data
                </td>
                <td>array|object</td>
                <td>数据</td>
                <td></td>
            </tr>
        </tbody>
    </table>
<pre class="rayui-code" data-options='{"title":"修改全局参数的方法"}'>
1、全局修改：
   rayui.use("template", function () {
        var tmpl = rayui.template;
        $.extend(tmpl.options, {
            open:"<%",
            close:"%>"
         });
    });

2、局部修改：
   rayui.use("template", function () {
        var tmpl = rayui.template;
        tmpl.render({
            content:"#tmpl1",
            data:data,
            open:"<%",
            close:"%>"
         });
    });
</pre>




<script>
        var data = [
            {
                a: 1,
                name: 'name1',
                state: true
            }, {
                a: 2,
                name: 'name2',
                state: false
            }, {
                a: 3,
                name: 'name3',
                state: true
            }], dataSingle = {
                name: '<span>我是span标签</span>'
            };
        rayui.ready(function () {
            var $ = rayui.$,
                tmpl = rayui.template,
                code = rayui.code;
            code.render({ title: '示例', encode: true });

            $("#con1").html(tmpl.render("#tmpl1", dataSingle));
            $("#con2").html(tmpl.render("#tmpl2", dataSingle));
            $("#con3").html(tmpl.render("#tmpl3", data));
            $("#con4").html(tmpl.render("#tmpl4", data));
            $("#con5").html(tmpl.render({
                content: "#tmpl5",
                data: dataSingle,
                open: "<%",
                close: "%>"
            }));
        });
    </script>
</body>
</html>
